.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 1.32rem;

    // 返回顶部
    .toTop {
        width: 1rem;
        height: 2rem;
        position: fixed;
        right: -1rem;
        bottom: 2rem; 
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: right 0.5s ease 0s;
        div {
            width: 100%;
            height: 0.92rem;
            border-radius: 0.15rem 0 0 0.15rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(90deg, rgb(255, 119, 166) 0%, rgb(252, 166, 124) 49%, rgb(225, 143, 234) 100%);
        }
        i {
            color: white;
        }
        p {
            color: white;
            font-size: 0.18rem;
        }
        span {
            display: inline-block;
            width: 0.9rem;
            height: 0.9rem;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            line-height: 0.9rem;
            text-align: center;
            i {
                font-size: 0.28rem;
            }
        }
    }
    // 滑动过度
    .toTopShow {
        right: 0rem;
        transition: right 0.5s ease 0s;
    }
    .header {
        width: 100%;
        // transform: translateY(-1rem);
        transition: all 0.5s ease 0s;
        position: fixed;
        top: 0;
        z-index: 3;
        // 下载app
        .headerTop {
            height: 1rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 0.2rem;
            box-sizing: border-box;
            background: linear-gradient(90deg, rgb(255, 119, 166) 0%, rgb(252, 166, 124) 49%, rgb(225, 143, 234) 100%);
            img {
                width: 0.7rem;
                height: 0.7rem;
                border-radius: 0.2rem;
            }
            div {
                width: 55%;
                height: 0.7rem;
                p {
                    position: relative;
                    left: -0.1rem;
                    color: white;
                    text-align: left;
                    span {
                        color: black;
                    }
                }
                p:last-child {
                    font-size: 0.2rem;
                }
            }
            div:last-child {
                width: 1.5rem;
                height: 0.5rem;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 0.26rem;
                border-radius: 0.4rem;
                background: rgb(255, 220, 113);
                color: rgb(255, 55, 113);
            }
        }

        // 搜索框
        .headerBottom {
            height: 1.2rem;
            background: linear-gradient(90deg, rgb(255, 100, 144) 0%, rgb(252, 59, 114) 100%);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 0.15rem;
            div {
                width: 6.34rem;
                height: 0.7rem;
                display: flex;
                align-items: center;
                padding: 0 0.15rem;
                background-color: white;
                border-radius: 0.1rem;
                i {
                    color: $mainGrey;
                }
                input {
                    padding-left: 0.1rem;
                    margin: 0;
                    height: 80%;
                    width: 90%;
                    border: none;
                    outline: none;
                }
            }
            img {
                width: 0.48rem;
                height: 0.48rem;
            }
        }
        .headerNavHide {
            display: none;
        }
        .headerNav {
            display: flex;

            li {
                width: 50%;
                height: 0.96rem;
                background-color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                // background-color: skyblue;
                padding-top: 0.15rem;
                p {
                    color: black;
                    font-size: 0.3rem;
                    padding: 0.1rem 0;
                }
                i {
                    display: none;
                }
            }
            .changeLi {
                p {
                    color: $mainPink;
                }
                i {
                    display: inline-block;
                    width: 0.48rem;
                    height: 0.06rem;
                    background: linear-gradient(270deg, rgb(255, 113, 133) 0%, white 100%);
                }
            }
        }
    }
    // 活动过度
    .headerHide {
        transform: translateY(-1rem);
        transition: all 0.5s ease 0s;
    }

    .content {
        padding-top: 2.19rem;
        background: $mainBag;

        // 轮播图
        .bannerBox {
            height: 3.2rem;
            position: relative;
            // background-color: cyan;
            .bannerTop {
                height: 2rem;
                background: linear-gradient(90deg, rgb(255, 100, 144) 0%, rgb(252, 59, 114) 100%);
            }
            .bannerBottom {
                height: 0.6rem;
                display: flex;
                justify-content: center;
                overflow: hidden;
                img {
                    // margin-top: 0.01rem;
                    width: 8.5rem;
                    height: 0.6rem;
                }
            }
            .banner {
                width: 7.1rem;
                height: 2.8rem;
                border-radius: 0.2rem;
                // background-color: cyan;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .contentMain {
            padding: 0 0.2rem;
            // 入口
            .entrance {
                height: 3.44rem;
                display: flex;
                flex-wrap: wrap;
                align-items: space-around;
                a {
                    display: inline-block;
                    width: 25%;
                    img {
                        width: 0.81rem;
                        height: 0.81rem;
                    }
                    p {
                        font-size: 0.24rem;
                        color: $mainGrey;
                        padding: 0.1rem 0;
                    }
                }
            }
            // g过度图
            .excImg {
                width: 100%;
                height: 1.76rem;
                border-radius: 0.15rem;
            }

            // 秒杀/拼购
            .together {
                background-color: white;
                height: 3.04rem;
                display: flex;
                padding: 0.2rem 0.1rem;
                margin-top: 0.4rem;
                align-items: center;
                justify-content: space-between;
                a {
                    display: inline-block;
                    height: 100%;
                    .togetherBox {
                        width: 3.2rem;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        // 标题
                        .togetherTitle {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .togTitle {
                                font-size: 0.32rem;
                            }
                            .togSta {
                                width: 1.36rem;
                                height: 0.32rem;
                                border: rgb(252, 63, 190) solid 0.01rem;
                                border-radius: 0.2rem;
                                color: rgb(252, 63, 190);
                                font-size: 0.18rem;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        // 内容
                        .seckillGoods {
                            display: flex;
                            justify-content: space-between;
                        }
                        .togetherList {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }

            // 四宫格
            .advRes {
                height: 2.64rem;
                margin-top: 0.4rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;

                img {
                    width: 3.5rem;
                    height: 1.2rem;
                }
            }

            // 底部选项卡
            .bottomNav {
                height: 1.3rem;
                display: flex;
                justify-content: space-around;
                align-items: center;
                li {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    p {
                        font-size: 0.22rem;
                        color: $mainGrey;
                    }
                }

                .bottomNavChange {
                    h3 {
                        color: $textPink;
                    }
                    p {
                        height: 0.4rem;
                        padding: 0 0.15rem;
                        background-color: $textPink;
                        border-radius: 0.4rem;
                        color: white;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            // 热卖
            .sellers {
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                justify-content: space-between;
                .sellersList {
                    display: inline-block;
                    margin-top: 0.2rem;
                    border-radius: 0.1rem;
                    overflow: hidden;
                    width: 3.46rem;
                    height: 5.12rem;
                    background-color: white;
                }
            }
            // 种草推荐
            .recommend {
                
                .recommends{
                    display: flex;
                    flex-wrap: wrap;
                    align-content: center;
                    justify-content: space-between;
                    
                    .recList {
                        // float: left;
                        height: auto;
                        display: inline-block;
                        margin-top: 0.2rem;
                        border-radius: 0.1rem;
                        overflow: hidden;
                        width: 3.48rem;
                        min-height: 3rem;
                        background-color: white;
                    }
                }
                
            }
        }
    }
}
